<template>
  <div class="wrapper">
    <div class="nav-top">
      <div class="section_title">热门模板</div>
      <a class="refresh" href="">查看全部模板>></a>
    </div>
    <div class="survey">
      <a href="" class="template-project">
        <div class="thumbnail-wrapper"></div>
        <div class="template-title" href="">身体健康状况调查</div>
      </a>
      <a href="" class="template-project">
        <div class="thumbnail-wrapper network"></div>
        <div class="template-title" href="">社交网站满意度</div>
      </a>
      <a href="" class="template-project">
        <div class="thumbnail-wrapper home-appliances"></div>
        <div class="template-title" href="">数码家电类产品满意度</div>
      </a>
      <a href="" class="template-project">
        <div class="thumbnail-wrapper iq-Tester"></div>
        <div class="template-title" href="">国际标准智商测试</div>
      </a>
      <a href="" class="template-project">
        <div class="thumbnail-wrapper shopping"></div>
        <div class="template-title" href="">团购网站用户满意度</div>
      </a>
      <a href="" class="template-project">
        <div class="thumbnail-wrapper game"></div>
        <div class="template-title" href="">PC端游、 页面满意度</div>
      </a>
    </div>
  </div>
</template>

<script>
export default {

};
</script>

<style lang="scss" scoped>
.wrapper{
  box-sizing: border-box;
}

.nav-top{
  display: flex;
  justify-content: space-between;
  margin-top: 38px;
  margin-bottom: 27px;
}

.section_title{
  font-size: 20px;
}

.refresh{
  font-size: 14px;
  color: #58a6e7;
  text-decoration: none;
}

.survey{
  display: flex;
  justify-content: space-between;
}

.template-project{
  display: inline-block;
  width: 138px;
  text-decoration: none;
}

.template-project:hover .template-title{
  color: #58a6e7;
}

.thumbnail-wrapper{
  width: 138px;
  height: 138px;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 5px;
  line-height: 138px;
  text-align: center;
  background-image: url('../assets/666.png');
  background-repeat: no-repeat;
  background-position: center;
}

.network{
  background-image: url('../assets/7.png');
}

.home-appliances{
  background-image: url('../assets/8.png');
}

.iq-Tester{
  background-image: url('../assets/9.png');
}

.shopping{
  background-image: url('../assets/10.png');
}

.game{
  background-image: url('../assets/11.png');
}

.template-title{
  color: black;
  text-decoration: none;
  font-size: 14px;
  margin-top: 13px;
  text-align: center;
  white-space: nowrap;
}
</style>
